<style scoped>
.div_box{
  background-image: url('/images/mob-back.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f8f8ff;
  overflow: scroll;
  /*border: 1px red solid;*/
}
.div_box::-webkit-scrollbar { width: 0; height: 0; }

.main_foot{
  overflow: hidden;
  height: 74px;
  padding-top: 7px;
  border-radius: 0;
  box-shadow: 0px 0px 10px 2px rgba(0,27,57,0.2);
  /*border: 1px red solid;*/
}
.main_foot .van-tabbar-item{
  margin-top: 18px;
  height: 36px;
}

.main_foot_item_div{
  height: 40px;
  font-size: 0.7rem;

  display: flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  /*border: 1px red solid;*/
}
</style>
<template>
  <div :style="{'height':main_height}">
    <div class="div_box" style="position: relative;height: calc(100% - 82px);">    <router-view></router-view></div>

    <van-tabbar v-model="activeTab" class="main_foot">
      <template v-for="menuItem in menuList">
        <van-tabbar-item :name="menuItem.name" :badge="menuItem.badge"
                         @click="tabChanged(menuItem.navigateurl)">
          <template #icon="props">
            <div v-if="menuItem.name!='s_ai'" class="main_foot_item_div">
              <img v-show="props.active" :src="menuItem.icon_url_01" />
              <img v-show="!props.active" :src="menuItem.icon_url_02" />
              <div v-show="!props.active">{{menuItem.name}}</div>
              <div v-show="props.active" style="color: rgb(67,135,250)">{{menuItem.name}}</div>
            </div>
            <div v-if="menuItem.name=='s_ai'" style="position: relative;">
              <img src="/images/aibj.gif" style="height: 40px;" />
              <img src="/images/aizs.png" style="position: absolute;height: 36px;top:3px;left: 4px;" />
            </div>
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script>

export default {
  extends: elmVueBase,
  data() {
    return {
      activeTab:'home_page',
      taskList:[],
      main_height:'500px',

      menuList:[
        {
          'name':'首页',
          'icon_url_01':'/images/mob-menu-icon/首页_蓝.svg',
          'icon_url_02':'/images/mob-menu-icon/首页_灰.svg',
          'navigateurl':'/business/my/studio',
          'badge':null,
        },
        {
          'name':'工作台',
          'icon_url_01':'/images/mob-menu-icon/工作台_蓝.svg',
          'icon_url_02':'/images/mob-menu-icon/工作台_灰.svg',
          'navigateurl':'/business/my/s_menu',
          'badge':null,
        },
        {
          'name':'s_ai',
          'icon_url_01':'/images/mob-menu-icon/工作台_蓝.svg',
          'icon_url_02':'/images/mob-menu-icon/工作台_灰.svg',
          'navigateurl':null,
          'badge':null,
        },
        {
          'name':'待办',
          'icon_url_01':'/images/mob-menu-icon/待办_蓝.svg',
          'icon_url_02':'/images/mob-menu-icon/待办_灰.svg',
          'navigateurl':'/business/my/s_task',
          'badge':null,
        },
        {
          'name':'我的',
          'icon_url_01':'/images/mob-menu-icon/我的_蓝.svg',
          'icon_url_02':'/images/mob-menu-icon/我的_灰.svg',
          'navigateurl':'/business/my/s_user_info',
          'badge':null,
        },
      ],
    }
  },
  async created() {
    elm.reRouter(this);

    let list = [];
    for(let i=0;i<elm.info.menu.length;i++){
      let item = elm.info.menu[i];
      if(item.name == '移动端底部菜单'){
        i=elm.info.menu.length;
        for(let kk=0;kk<elm.info.menu.length;kk++){
          let cItem = elm.info.menu[kk];
          if(cItem.pid == item.id){
            let cItemData = {
              'name':cItem.name,
              'icon_url_01':'/images/mob-menu-icon/'+cItem.name+'_蓝.svg',
              'icon_url_02':'/images/mob-menu-icon/'+cItem.name+'_灰.svg',
              'navigateurl':cItem.navigateurl,
              'badge':null,
            };
            list.push(cItemData);
          }
        }
      }
    }
    if(list.length>0){this.menuList[0] = list[0];}
    if(list.length>1){this.menuList[1] = list[1];}
    if(list.length>2){this.menuList[3] = list[2];}
    if(list.length>3){this.menuList[4] = list[3];}

    this.activeTab = this.menuList[0].name;
    this.tabChanged(this.menuList[0].navigateurl);
    this.v_getTask();
  },
  mounted() {
    //this.main_height = (window.screen.height)+'px';
    this.main_height = (Math.max(document.body.scrollHeight, document.documentElement.scrollHeight))+'px';
  },
  methods: {
    tabChanged:function(navigateurl){
      if(!this.em(navigateurl)){
        this.$router.push({ path: navigateurl });
      }
      else{
        this.$router.push({ path: '/business/my/studio' });
      }
    },
    async v_getTask() {
      let taskData = await elm.post('/system/login/flow/GetUserTaskRunning', {'pageNum': 1, 'pageSize': 5});
      this.taskList = taskData.pagedata;

      for(let i=0;i<this.menuList.length;i++){
        let item = this.menuList[i];
        if(item.name == '待办' && this.taskList.length>0){
          item.badge = this.taskList.length;
        }
      }
    },
    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },
  }

};
</script>